import React, { useState } from 'react';
import classes from './FilterMeals.module.css';

const FilterMeals = (props) => {
  const [keyword, setKeyword] = useState('')
  const inputChange = e => {
    const keyword = e.target.value.trim()
    props.onFilter(keyword)
  }

  return (
    <div className={classes.FilterMeals}>
      <div className={classes.InputOuter}>
          <input
              onChange={inputChange}
              className={classes.SearchInput}
              type="text"
              placeholder={"请输入关键字"}/>
      </div>
    </div>
  );
};

export default FilterMeals;